<template>
  <!-- 人员管理--新增和编辑 -->
  <el-dialog title="用户信息"
             class="addPersonage"
             width='662px'
             :visible.sync="visible">
    <!-- 具体表单 -->
    <div class="box-card">
      <!-- <div v-for="o in 4"
           :key="o"
           class="text item">
        {{'列表内容 ' + o }}
      </div> -->
      <div class="item">
        <span>头像：</span>
        <!-- {{dataForm.avatarUrl}} -->
        <img :src="dataForm.avatarUrl"
             class="license_img"
             alt="头像">
      </div>
      <div class="item">
        <span>姓名：</span>{{dataForm.userName}}
      </div>
      <div class="item">
        <span>性别：</span>{{dataForm.sex}}
      </div>
      <div class="item">
        <span>年龄：</span>{{dataForm.age}}
      </div>
      <div class="item">
        <span>电话：</span>{{dataForm.phone}}
      </div>
      <div class="item">
        <span>地址：</span>{{dataForm.address}} {{dataForm.area}}
      </div>
      <div class="item">
        <span>身份证号：</span>{{dataForm.idNumber}}
      </div>
      <div class="item">
        <span>银行卡号：</span>{{dataForm.bakInfo.bankCardNumber}}
      </div>
      <div class="item">
        <span>开户银行：</span>{{dataForm.bakInfo.bankName}}
      </div>
      <div class="item">
        <span>收款人姓名：</span>{{dataForm.bakInfo.pname}}
      </div>
      <div class="item">
        <span>创建时间：</span>{{dataForm.createTime}}
      </div>
      <div class="item">
        <span>是否认证：</span>{{dataForm.isAuth == 0?'否':'是'}}
      </div>
      <div class="item">
        <span>是否禁用：</span>{{dataForm.status == 0?'禁用':'启用'}}
      </div>
    </div>

    <!-- </el-card> -->
  </el-dialog>
</template>

<script>
export default {
  // props: ['mode'],
  data () {
    return {
      // 隐藏
      visible: false,
      // 数据
      // menuList: [],
      // menuListTreeProps: {
      //   label: 'name',
      //   children: 'children'
      // },
      dataForm: {
        bakInfo: {
        }
      },
      dataRule: {
        userName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ]
      },
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  methods: {
    // 父调用的方法
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$http({
        url: this.$http.adornUrl('/sys/user/person/info/' + this.dataForm.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataForm = data.personUser
        if (!data.personUser.bakInfo) {
          this.dataForm.bakInfo = {
            bankCardNumber: '',
            bankName: '',
            pname: ''
          }
        }
        this.dataForm.status = this.dataForm.status + ''
        this.dataForm.isAuth = this.dataForm.isAuth + ''
      })
    }
    // 结束
  }
}
</script>

<style lang="scss">
.addPersonage {
  .forms {
    .el-input.el-input--medium {
      width: 370px;
    }
    .el-dialog__header {
      background-color: #f8f8f8;
    }
    .el-dialog__body {
      display: flex;
      justify-content: center;
    }
    .btn {
      width: 370px;
    }
    .dialog-footer {
      text-align: center !important;
      padding-bottom: 39px;
    }
    .el-dialog__footer {
      text-align: center;
      padding-bottom: 39px;
    }
  }
  .box-card {
    padding: 0 20px;
    width: 100%;
    .text {
      font-size: 14px;
    }

    .item {
      padding: 0 0 18px 0;
      margin-bottom: 18px;
      border-bottom: 1px solid #f1f3f8;
      span {
        display: inline-block;
        width: 100px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
        color: #000000;
      }
      .license_img {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #d9d9d9;
      }
    }
  }
}
</style>
